<template>
    <Teleport to="body">
      <div v-if="modals.length" class="modal-overlay">
        <div
          v-for="modal in modals"
          :key="modal.id"
          class="modal-wrapper"
          @click.self="close(modal.id)"
        >
          <component :is="modal.component" v-bind="modal.props" />
        </div>
      </div>
    </Teleport>
  </template>
  
  <script>
  import { inject } from 'vue'
  
  export default {
    name: 'ModalContainer',
    setup() {
      const modalService = inject('modalService')
      return {
        modals: modalService.modals,
        close: modalService.close,
      }
    }
  }
  </script>
  
  <style scoped>
  .modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
  }
  </style>
  